<template>
	<view class="charts-box">
		<qiun-data-charts type="ring" v-for="(item,index) in chartDataList" :key="index"
			:chartData="{series:[{data:item}]}"></qiun-data-charts>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {

			return {
				opts: {
					title: {
						name: "农作物种植占比"
					},
					color: ['lightgreen', 'lightblue'],
					extra: {
						// 环状图配置
						ring: {
							// 圆环的粗细
							ringWidth: 30
						}
					}
				},
				chartDataList: []
			}
		},
		onReady() {
			// 请求统计数据
			this.getData();
		},
		methods: {
			// 请求统计数据
			async getData() {
				const res = await request('/api/cropAreasProportion');
				// 计算统计数据
				const seriesData = res.data.map(item => {
					return [{
							name: item.areas,
							value: item.zb
						},
						{
							name: '其他地区',
							value: item.other,
						}
					]
				});
				this.chartDataList = seriesData;
			}
		}
	}
</script>

<style>
	.charts-box {
		margin-top: 60rpx;
		width: 100%;
		height: 300px;
	}
</style>